<!--  -->
<template>
  <div v-if="userInfo" >
    <el-card shadow="hover" class="mgb20">
      <div class="user-info">
         <el-avatar  :src="imgUrl"  class="user-avatar" alt="用户头像" @click="updateAvatar"  >
      <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
    </el-avatar>
        <div class="user-info-cont">
          <div class="user-info-name">
            {{ userInfo.username }}
          </div>
          <div class="role" >
            <template v-for="(item, index) in userInfo.userRoles" :key="index" >
              {{item.name}}&nbsp;&nbsp;
            </template>
          </div>
        </div>
      </div>
      <div class="user-info-list">
        <span class="left">电话:</span>
        <span>{{ userInfo.phone }}</span>
      </div>

      <div class="user-info-list">
        <span class="left">创建时间:</span>
        <span>{{ userInfo.createdAt }}</span>
      </div>
    </el-card>
    <upload-avatar  v-if="imgUrl" ref="uploadDialog" :img-url="imgUrl" @clipSuccess='handleClipSuccess'>
    </upload-avatar>
  </div>
</template>
<script setup lang='ts' >
import { ref,computed} from 'vue'
import UploadAvatar from "@/base-ui/upload-avatar"
import { useStore } from '@/store';
import { base64ToFile } from "@/utils/toFile"
import axios from "axios"
const store = useStore()

let userInfo = computed(() => store.state.login.userInfo)
const uploadDialog = ref<InstanceType<typeof UploadAvatar>>()
const imgUrl =computed(() => store.state.login.userInfo.avatar)

const updateAvatar = () => {
  uploadDialog.value!.uploadDialog = true
}
const handleClipSuccess = async(base64url: any, Blob: any) => {
  uploadDialog.value!.uploadDialog = false
  const file = base64ToFile(base64url, 'avatar.jpg')
  let formData = new FormData()
  formData.append('file', file, file.name)
  await store.dispatch('user/updateAvatarAction',{id:userInfo.value.id,formData,store})
  await store.dispatch('login/getUserInfoAction')
}
</script>

<style lang='less' scoped>
.role {
  margin-top: 10px;
}

.mgb20 {
  margin-bottom: 20px;
}


.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
  display: flex;
}

.user-info-list .left {
  display: inline-block;
  width: 6.125rem;
  margin: 0 10px;
}

.user-info-list span {
  margin-left: 5px;
}
</style>
